<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>邮件列表</title>
    <meta name="author" content="汤姆克鲁斯"/>
    <!-- <meta name="site" content="https://blog.52itstyle.com" /> -->
    <link rel="stylesheet" th:href="@{/iview/iview.css}">
    <script th:src="@{/libs/jquery-3.2.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/libs/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/iview/iview.min.js}" type="text/javascript"></script>
    <script th:src="@{/common.js}" type="text/javascript"></script>
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div style="margin-bottom: 6px">
        <template>
            <i-input placeholder="输入邮件主题" v-model="mail.subject" style="width: 200px"></i-input>
        </template>
        <i-button type="primary" icon="ios-search" @click="list()">查询</i-button>
        <i-button type="primary" icon="refresh" @click="reload()">清空</i-button>
    </div>

    <template>
        <i-table border :content="self" :columns="tableTitle" :data="consultData"></i-table>
        <br>
        <!-- <Page :current="mail.pageNumber" :total="total" :page-size="mail.pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-elevator show-sizer show-total></Page> -->
    </template>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            mail: {
                subject: ""
            },
            tableTitle: [{
                key: "receiveEmail",
                title: "接收人邮箱",
                width: "",
            }, {
                key: "subject",
                title: "主题",
                width: ""
            }, {
                key: "content",
                title: "发送内容",
                width: "",
                render: function (h, params) {
                    var functionList = [];
                    var see = h('Button', {
                        props: {icon: "ios-search", type: 'primary', size: 'small'},
                        attrs: {id: 'foo'},
                        style: {
                            width: '',
                            marginLeft: '-10px',
                            marginRight: '-10px',
                            marginBottom: '1px',
                            marginTop: '1px'
                        },
                        on: {
                            click: function () {
                                vm.see();
                                vm.msg = params.row.content;
                            }

                        }
                    }, '查看');
                    functionList.push(see);
                    // 返回方法集合
                    return h('div', functionList);
                },
            }, {
                key: "template",
                title: "模板",
                width: ""
            }, {
                key: "sendTime",
                title: "发送时间",
                width: "",
                render: function (h, params) {
                    return h('div', new Date(this.row.sendTime).Format('yyyy-MM-dd'));
                }
            },],
            consultData: []
        },
        methods: {
            list: function () {
                $.ajax({
                    url: '../mail/list?_' + $.now(),
                    type: "post",
                    param: this.mail,
                    success: function (result) {
                        vm.consultData = result.data;
                    }
                });
            },
            reload: function (type) {
                this.list();
            },
            see: function () {
                dialogOpen({
                    title: '内容',
                    url: '/email/show.html?_' + $.now(),
                    width: '850px',
                    height: '550px',
                    btn: null,
                    scroll: true,
                    success: function (iframeId) {
                        top.frames[iframeId].document.write(vm.msg);
                    },
                });
            },
            initFormatter() {
                Date.prototype.Format = function (fmt) {
                    let o = {
                        "M+": this.getMonth() + 1,                 //月份
                        "d+": this.getDate(),                    //日
                        "h+": this.getHours(),                   //小时
                        "m+": this.getMinutes(),                 //分
                        "s+": this.getSeconds(),                 //秒
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                        "S": this.getMilliseconds()             //毫秒
                    };
                    if (/(y+)/.test(fmt))
                        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    for (var k in o)
                        if (new RegExp("(" + k + ")").test(fmt))
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    return fmt;
                }
            }
        },
        created: function () {
            this.list();
            this.initFormatter();
        }
    });
</script>
</body>
</html>